<template>
	<view class="video_list_box">		
		<view class="content">
			<view v-if="currentLocation.address">
				<view>名称：{{currentLocation.name}}</view>
				<view>位置：{{currentLocation.address}}</view>
				<view>纬度：{{currentLocation.latitude}}</view>
				<view>经度：{{currentLocation.longitude}}</view>
			</view>
			<view v-else @click="authVerification()">请选择位置</view>
		</view>
		
		<view class="mt_40 text_center" @click="sendLocation()"> 
			<button class="send_location_btn">发送位置</button> 
		</view>
		
		<view class="mt_40 text_center" @click="authVerification()">
			<button class="send_location_btn">更新位置</button> 
		</view>
		
		<!-- <scroll-view class="full" scroll-y="true" lower-threshold="50" @scrolltolower="handlePagenation()">
			<view class="video_list_item" v-for="(item, index) in dataList" :key="index" @click="handleClickVideoItem(index)">
				<view class="img_box">
					<image :src="item.content.mediaList[0].coverUrl" mode=""></image>
				</view>
				
				<view class="bottom_box">
					<view class="avatar_box">
						<image class="full" :src="item.avatar_img || def_avatar_img" mode=""></image>
					</view>
					
					<view class="view_count_box">
						<{{ item.distance || 'xxx ' }}km
					</view>
				</view>
			</view>	
		</scroll-view> -->
	</view>
</template>

<script>
	import getSystemInfo from '@/mixins/basic.js'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	
	export default {
		mixins: [getSystemInfo],
		data() {
			return {
				listHeight: 0,
				dataList: [],
				currentLocation: {},
				pagenation: {
					current: 1,
					size: 10
				},
				isPagenation: false,
				
			}
		},
		created() {
			this.currentLocation = uni.getStorageSync('location')
		},
		watch: { 
			
		},
		onShow() {
			this.getMediaList()
		},
		mounted(){
			uni.$on('getFujinMediaList', () => {
				if (uni.getStorageSync('location')) {
					if (!this.dataList.length) {
						this.pagenation.current = 1
						// this.getMediaList()
					}
				}
			})
		},
		methods: {			
			// 获取附近视频数据
			getMediaList() {
				let that = this
								
				let params = {
					// blogStat: {
					// 	likeNum: 5,
					// 	starNum: 10
					// },
					// geoLocation: {
					// 	lat: that.currentLocation.latitude.toString(),
					// 	lng: that.currentLocation.longitude.toString()
					// }
					
					current: this.pagenation.current,
					size: this.pagenation.size
				}
				
				NET.request(API.getMediaList, params, 'GET')
				.then(res => {
					if (res.code === 200) {
						console.log('获取附近的视频 : ', res)
						that.dataList = [...that.dataList, ...res.data]
						this.dataListTotal = res.total
					}
				})
				.catch(err => {
					uni.showToast({
						title: '获取失败！',
						icon: 'error'
					})
				})
			},
			
			// 分页获取
			handlePagenation() {
				if (!this.isPagenation) {
					if (this.dataList.length < this.dataListTotal) {
						this.isPagenation = true
						this.pagenation.current ++
						this.getMediaList()
						setTimeout(() => {this.isPagenation = false}, 500)
					} else {
						uni.showToast({
							title: '数据到底了！', icon: 'none'
						})
					}
				} else {
					return false
				}
			},
			
			// 点击 视频 item
			handleClickVideoItem(index) {
				// 跳转到视频详情页面
				uni.navigateTo({
					url: '/subcontract/detail-video/detail-video',
				})
			},
			
			// 发送位置
			sendLocation() {
				let lat = this.currentLocation.latitude
				let lon = this.currentLocation.longitude
				
				let params = { lon: lon, lat: lat }
				
				NET.request(API.sendLocation, params, 'GET')
				.then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '发送成功！', icon: 'success'
						})
					}
				})
				.catch(err => {
					uni.showToast({
						title: '发送失败！',
						icon: 'error'
					})
				})
			},
			
			authVerification() {
				let that = this
				uni.getSetting({
					success: function(res) {
						if (res.authSetting['scope.userLocation']) {
							that.handerChooseLocation()
						} else if (res.authSetting['scope.userLocation'] === undefined) {
							console.log('没有授权')
							that.handleOpenSetting()
						} else { 
							console.log('拒绝了授权 false')
							that.handleOpenSetting()
						}
					},
				})
			},
			
			handerChooseLocation() {
				let that = this
				uni.chooseLocation({
					success: function (res) {
						let location = {
							name: res.name,
							address: res.address,
							latitude: res.latitude,
							longitude: res.longitude
						}
						
						that.currentLocation = location
						uni.setStorageSync('location', location)
					}
				});
			},
			
			handleOpenSetting() {
				wx.openSetting({
					success: (res) => {
						console.log('定位 getSetting', res)
						if (res.authSetting["scope.address"]) {
							this.handerChooseLocation()
						}
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.send_location_btn {
		padding: 10rpx;
		width: 50%;
		font-size: 28rpx;
		color: #fff;
		background-color: #1c9aa0;
	}
	
	.video_list_box {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: #fff;
		padding: 10rpx;
		box-sizing: border-box;
		
		.video_list_item {
			width: 49.5%;
			height: 25%;
			padding: 10rpx;
			border-radius: 10rpx;
			background: #fff;
			box-sizing: border-box;
			margin-bottom: 10rpx;
			position: relative;
			float: left;
			
			.img_box { 
				width: 100%; 
				height: calc(100% - 40rpx);
				padding: 4rpx;
				border-radius: 10rpx;
			 
				image { 
					width: 100%; 
					height: 100%; 
					border-radius: 10rpx
				};
			}
			
			.bottom_box {
				width: 100%;
				height: 40rpx;
				position: absolute;
				left: 0;
				bottom: 0;
				padding: 0 10rpx;
				box-sizing: border-box;
				// border: 1rpx solid #f00;

				.avatar_box {
					width: 70rpx;
					height: 150%;
					border-radius: 50%;
					
					image { 
						width: 100%;
						height: 100%;
						border-radius: 50%; 
					}
				}
								
				.view_count_box {
					padding: 0 10rpx;
					position: absolute;
					top: 50%;
					right: 12rpx;
					transform: translateY(-50%);
					color: #999;
				}
			}
		}
	}
</style>
